<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快速入门</title>
		<script type=text/javascript src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
		    <site-info
		       v-for="site in sites"
		       :id="site.id"
		       :title="site.title"
		     ></site-info>
			 
			 <site-info
			    :id="si.id"
			    :title="si.title"
			  ></site-info>
		    
		</div>
	</body>
	<script>
		// 创建一个Vue 应用
		const Site = {
		  data() {
		    return {
		      sites: [
		        { id: 1, title: 'Google' },
		        { id: 2, title: 'Runoob' },
		        { id: 3, title: 'Taobao' }
		      ],
			  si:{
				  id:4,title:'ssss'
			  }
		    }
		  }
		}
		/*
		Vue.component('site-info', {
		  props: {
		    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
		    propA: Number,
		    // 多个可能的类型
		    propB: [String, Number],
		    // 必填的字符串
		    propC: {
		      type: String,
		      required: true
		    },
		    // 带有默认值的数字
		    propD: {
		      type: Number,
		      default: 100
		    },
		    // 带有默认值的对象
		    propE: {
		      type: Object,
		      // 对象或数组默认值必须从一个工厂函数获取
		      default: function () {
		        return { message: 'hello' }
		      }
		    },
		    // 自定义验证函数
		    propF: {
		      validator: function (value) {
		        // 这个值必须匹配下列字符串中的一个
		        return ['success', 'warning', 'danger'].indexOf(value) !== -1
		      }
		    }
		  }
		})
		*/
		const app = Vue.createApp(Site)
		 
		app.component('site-info', {
		  props: ['id','title'],
		  template: `<h4>{{ id }} - {{ title }}</h4>`
		})
		 
		app.mount('#app')
		console.log(Site.data());
		
	</script>
</html>
